<template>
  <div :style="{backgroundColor: bgColor}"
    class="tw-datasetchart tw-timefilter">
    <el-select v-model="currentType" class="tw-timefilter-select" @change="selectChange">
      <el-option v-for="(item, index) in timeLabels" :key="index" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <div class="tw-timefilter-picker" v-show="currentType === 6">
      <!-- 时间日期选择 -->
      <el-date-picker
        v-model="currentDate"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="startTimeChange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
const props = require('./props')

export default {
  name: 'web-timefilter',

  props,

  data() {
    return {
      currentDate: '',
      currentType: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      allTimeLabel: [
        {
          id: 1,
          name: '今天'
        },
        {
          id: 2,
          name: '本周'
        },
        {
          id: 3,
          name: '本月'
        },
        {
          id: 4,
          name: '本学期'
        },
        {
          id: 5,
          name: '本学年'
        },
        {
          id: 6,
          name: '自定义'
        }]
    }
  },

  computed: {
    timeLabels () {
      return this.allTimeLabel.filter(item => this.type.includes(item.name))
    }
  },

  methods: {
    selectChange (val) {
      const vm = this
      if (val !== 6) {
        let selectedTime = this.getNameFromArrayById(this.allTimeLabel, val) + ',' + ','
        if (this.fromApi) {
          selectedTime = ''
          let stime = ''
          let etime = ''
          if (this.data.length > 0) {
            switch (val) {
              case 1:
                stime = vm.data[0].rqqsrq || ''
                etime = vm.data[0].rqjsrq || ''
                break
              case 2:
                stime = vm.data[0].nzqsrq || ''
                etime = vm.data[0].nzjsrq || ''
                break
              case 3:
                stime = vm.data[0].nyqsrq || ''
                etime = vm.data[0].nyjsrq || ''
                break
              case 4:
                stime = vm.data[0].xqqsrq || ''
                etime = vm.data[0].xqjsrq || ''
                break
              case 5:
                stime = vm.data[0].xnqsrq || ''
                etime = vm.data[0].xnjsrq || ''
                break
              default:
            }
          }
          selectedTime = stime + ',' + etime
          console.log('selectedTime', selectedTime)
          this.$emit('input', selectedTime)
          this.$emit('change', selectedTime)
        } else {
          console.log('selectedTime', selectedTime)
          this.$emit('input', selectedTime)
          this.$emit('change', selectedTime)
        }
      }
    },
    startTimeChange (val) {
      if (val) {
        let selectedTime = '自定义' + ',' + val[0] + ',' + val[1]
        if (this.fromApi) {
          selectedTime = val[0] + ',' + val[1]
        }

        this.$emit('input', selectedTime)
        this.$emit('change', selectedTime)
      }
    },
    /**
    * 功能: 字典通用方法，按name查询id值
    * @param {Array} objArray 对象数组
    * @param {String} name 对象名称
    */
    getIdFromArrayByName(objArray, name) {
      try {
        return objArray.filter(o => o.name === name)[0].id
      } catch (err) {
        return undefined
      }
    },
    /**
    * 功能: 字典通用方法，按id查询name值
    * @param {Array} objArray 对象数组
    * @param {String} id 对象id
    */
    getNameFromArrayById(objArray, id) {
      try {
        return objArray.filter(o => o.id === id)[0].name
      } catch (err) {
        return undefined
      }
    }
  },

  mounted () {
    this.currentType = this.getIdFromArrayByName(this.allTimeLabel, this.timeType)

    // if (this.timeType === '自定义' && this.funcDefaultTime !== '' && typeof this.funcDefaultTime === 'function') {
    //   this.currentDate = this.funcDefaultTime()
    //   this.startTimeChange(this.currentDate)
    // }
    if (this.timeType === '自定义' && this.defaultTime.length > 0) {
      this.currentDate = this.defaultTime
      this.startTimeChange(this.currentDate)
    }
  },

  beforeDestroy () {
  },

  watch: {
    timeType (val) {
      this.currentType = this.getIdFromArrayByName(this.allTimeLabel, val)
      // if (this.timeType === '自定义' && this.funcDefaultTime !== '' && typeof this.funcDefaultTime === 'function') {
      //   this.currentDate = this.funcDefaultTime()
      //   this.startTimeChange(this.currentDate)
      // }
    },
    defaultTime (val) {
      this.currentDate = val
      this.startTimeChange(this.currentDate)
    },
    data: {
      deep: true,
      handler () {
        if (this.currentType === 6) {
          this.startTimeChange(this.currentDate)
        } else {
          this.selectChange(this.currentType)
        }
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
